<template>
    <div>
        <!--轮播图-->
        <indexslider></indexslider> <!-- 轮播图 -->

        <!--图标列表展示-->
        <yd-flexbox>
            <div  v-for="(item, key) in Catlists" :key="key" style="width: 25%;background-color: #fff;padding-bottom: 0.1rem">
                <img id="icon_list" slot="icon" :src='item.image_url' type="link" :href="{path:'goodslist',query:{cat_id:item.id}}">
                <p slot="text" class="btn">{{item.name}}</p>
            </div>
        </yd-flexbox>


        <yd-list theme="2" slot="list">
            <yd-list-item v-for='(item, key) in GoodsLists' :key='key' type="link" :href="{path:'goodsdetail',query:{goods_id:item.id}}">
                <img slot='img' :src='item.image_url'>
                <span slot='title'>{{item.name}}</span>
                <yd-list-other slot='other'>
                    <div>
                        <span class='demo-list-price'><em>¥</em>{{item.price}}</span>
                    </div>
                </yd-list-other>
            </yd-list-item>
        </yd-list>


    </div>
</template>
<style type="text/css">
    .yd-grids-5:before{
        width: 0%;
    }
    .yd-grids-5 .yd-grids-item:not(:nth-child(5n)):before{
        width: 0%;
    }
    .btn{
        font-weight: bold;
        color: #333333;
    }
    #icon_list{
       width: 55%;
       margin-top: 0.1rem;
    }
    .btn{
        font-weight: normal;
        font-size: 0.2rem;
    }
</style>
<script>
    import indexslider from '../components/IndexSlider.vue'
    export default {
        data () {
            return {
                Catlists:[],
                GoodsLists:[]
            }
        },
        components: {
            indexslider
        },
        // 实例创建并挂载后调用此方法
        mounted () {
            this.getCatNameInfo()
            this.getchildcatLists()
            this.getgoodscathotgoodsList()
        },
        methods :{
            getCatNameInfo(){
                this.$api.getname({id: this.$route.query.introduction_id}, res => {
                    this.$route.meta.title = res.data;
                    document.title = res.data;
                })
            },
            getchildcatLists () {
                this.$api.getchildcatList({parent_id: this.$route.query.introduction_id}, res => {
                    this.Catlists = res.data;
                })
            },
            // 统一返回筛选条件 查询条件 分页
            conditions () {
                let where = {cat_id: this.$route.query.introduction_id}
                let data = {
                    page: 1,
                    limit: 6,
                    where: JSON.stringify(where)
                }
                return data
            },
            getgoodscathotgoodsList () {
                this.$api.goodsList(this.conditions(), res => {
                    this.GoodsLists = res.data.list;
                })
            }
        }
    }
</script>

<style scoped>

</style>
